<%@page import="com.wodwl.entity.Blog"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.wodwl.entity.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@include file="../templete/head.jsp"  %>
	<style type="text/css">
		div .con{
			overflow: hidden;
		}
		
		.mainRight .btn{
			float: right;
			margin-right: 5px;
		}
		
		.content .list ul{
			list-style-type: none;
			display: block;
		}
		.content .list ul li{
			height: 125px;
			border-bottom: 1px dotted #f6b13f;
		}
		.bar span{
			display:inline-block;
			margin-right: 10px;
		}
		.content .bar .title{
			font-size: 24px;
		}
		
		.content .list{
			display:inline-block;
			width:65%;
		}
		.content .sort{
			display:inline-block;
			text-align:center;
			margin-top:10px;
			height:1000px;
			width:30%;
			vertical-align:top;
		}
		.content .list .con{
			clear:both;
			padding:7px 0 5px 0;
			height: 50px;
			width: 75%;
			margin-right: 50px;
		}
		.list .op{
			float: right;
			padding-right: 20px;
		}
		.list span{
			margin-left: 5px;
		}
		
		
		
		
		
	
		ul#tab_nav{
			list-style-type: none;
			margin: 0px;
			padding-left: 0px;
			padding-bottom: 23px;
			border-bottom: 2px solid #f6b13f;
			font: bold 12px verdana,arial;
		}
		ul#tab_nav li{
			float: left;
			height: 22px;
			background-color: #f6b13f;
			margin: 0px 3px 0px 0px;
			border: 2px solid #f6b13f;
		}
		ul#tab_nav a:LINK,ul#tab_nav a:VISITED {
			display: block;
			color: #248ef4;
			text-decoration: none;
			padding: 5px 10px 3px 10px;
		}
		ul#tab_nav a:HOVER {
			background-color: #248ef4;
			color:#ffffff;
		}
		#_tabs li.cur{
			border-bottom: 2px solid #ffffff;
			color:#000000;
			background-color: #ffffff;
		}
		#tab_content{
			border: 2px solid #f6b13f;
			border-top: none;
			
		}
		#tab_content ul{
			padding-left:0px;
			margin-top: 0px;
			margin-left:0px;
			list-style-type: none;
			text-align: left;
		}
		#tab_content li{
			height: 50px;
			border-bottom: 1px dotted #f6b13f;
		}
		#tab_content span{
			display: inline-block;
			height: 100%;
			overflow: hidden;
		}
		#tab_content .no{
			margin-right:5px;
			font-size: 16px;
			font-weight:bold;
			color: red;
			width: 20%;
		}
		#tab_content .con{
			font-size: 10px;
			width: 75%;
		}
	</style>
	
</head>
<body >
	<%pageContext.setAttribute("linkType", "6");%>
	<%@include file="../templete/banner.jsp"  %>
	<% List<Blog> blogs=(List<Blog>) request.getAttribute("blogs");%>	


	<div class="mainRight">
		<div class="mainRightBar">
				<div class="title">博客列表</div>
				<div class="myblog_btn btn" >我的博客</div>
				<div class="blog_category_btn btn">博客分类</div>
				<div class="blog_list_btn btn" >博客列表</div>
				<div class="write_blog_btn btn" >写博客</div>
		</div>
		<div class="content">
			<div class="list">
				<ul>
				<%
					if(blogs!=null)
						for (int i = 0; i < blogs.size(); i++) {
							Blog item = blogs.get(i);
				%>
					<li>
							<div class="bar">
								<span class="title ">
									<a class="cBlue fB" href="/blog/blog_show.do?username=<%=user.getUsername()%>&bid=<%=item.getBid()%>"><%=item.getTitle() %></a>
								</span>
								<span>
									作者：<a href="/user/info_display.do?username=<%=user.getUsername()%>&request_username=<%=item.getUsername()%>">
									<%=item.getUsername()%></a>
								</span>
								<span>
									<%=sdf.format(item.getCreate_time()) %>
								</span>
								
							</div>
							
							<div class="con">
								<%=item.getContent() %>
							</div>
						
							<div class="op">
								<span>阅读(<%=item.getRead_count() %>)</span>
								<span>评论(<%=item.getComment_count() %>)</span>
								<span><a href="/blog/blog_show.do?bid=<%=item.getBid()%>">查看</a></span>
							</div>
					</li>
				<%}%>		
				</ul>
			</div>
			<div class="sort">
				<div id="_tabs" >
					 <ul id="tab_nav">
					 	<li class="cur"><a href="#">日榜</a></li>
						<li ><a href="#">周榜</a></li>
						<li ><a href="#">月榜</a></li>
						<li ><a href="#">金榜</a></li>
					</ul>
					<div id="tab_content">
						<ul>
							<li class="pre"></li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>

		<p class=" divPage">
			<span class="cur">1</span> <a href="#" class="item">2</a> <a
				href="#" class="item">3</a> <a class="item" href="#">下一页</a>
		</p>
	</div>
</div>

<%@include file="../templete/footer.jsp"  %>
	
<script type="text/javascript">
	var topData;//排行榜数据
	$(document).ready(function(){
		$(".btn").button();
		
		$(".write_blog_btn").click(function(){
			window.location.href="/blog/blog_add_view.do";
		});
		$(".blog_list_btn").click(function(){
			window.location.href="/blog/blog_list.do";
		});
		$(".blog_category_btn").click(function(){
			window.location.href="/blog/category_list.do";
		});
		$(".myblog_btn").click(function(){
			window.location.href="#";
		});
		
		
		$("#tab_nav li").each(function(i){
			$(this).click(function(){
				$("#_tabs li.cur").removeClass("cur");
				$(this).addClass("cur");
				if(i==0){
					fillTop(topData.dayTop);
				}else if(i==1){
					fillTop(topData.weekTop);
				}else if(i==2){
					fillTop(topData.monthTop);
				}else{
					fillTop(topData.yearTop);
				}
				
			});
		});
		
		function fillTop(tops){
			$("#tab_content ul").remove();
			var ul=$("<ul>");
			
			for(var i=0;i<tops.length;i++){
				var li=$('<li><span class="no">'+(i+1)+'</span><span class="con"><a href="/blog/blog_show.do?bid='+tops[i].bid+'">'+tops[i].title+'('+tops[i].read_count+'人阅读)'+'</a></span></li>');
				ul.append(li);
			}
			$("#tab_content").append(ul);
		}
		
		$.ajax({       
			type: "POST",   
			url: "/blog/blog_top.do", 
			contentType: "application/json; charset=utf-8", 
			dataType: "json",       
			success: function(res) { 
				topData=res;
				fillTop(topData.weekTop);
			}   
			});
		
		
	});
</script>
</body>
</html>